<template>
  <div id="header_navbar" >
    <div class="container"  @mouseleave="onMouseOut" >
      <!-- logo -->
      <div class="logo">
        <img :src="webInfo.logo" alt="170 * 100尺寸以内的logo">
      </div>
      <!-- BTN -->
      <div class="btnbox" @mouseover="itemShow" >
        <div class="itemname">{{ secondTitle }}</div>
        <div class="icon">
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>
      <!-- navbar -->
      <div class="navbar">
          <el-menu :default-active="activeIndex" router active-text-color="#409EFF" 
            mode="horizontal" @select="handleSelect">
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/userinfo">咨询</el-menu-item>
            <el-menu-item index="/userinfo">免费课</el-menu-item>
            <el-menu-item index="/userinfo">资料</el-menu-item>

            <el-menu-item index="/userinfo">学习中心</el-menu-item>
          </el-menu>
      </div>
      <!-- login or register -->
      <div class="login">
        <div class="userinfo" v-if="token && username ">
          <el-link type="primary" @click="showInfo">{{ username }}</el-link> , <el-link type="danger" @click="logout">退出</el-link>
        </div>
        <div class="link" v-else>
          <el-link type="primary" :underline="false" @click="$router.push('/login')" >登录</el-link> <el-link >/</el-link> <el-link type="success" :underline="false" @click="$router.push('/register')">注册</el-link>
        </div>
        <div class="tel">
          <el-link type="danger" style="font-size:18px">400-000-0000</el-link>
        </div>
      </div>

      <!-- display: none -->
      <div class="itemlist" v-if="showItem" @mouseover="itemShow">
        <div class="nav_item">
          <div class="nav_group">
                <div class="group" v-for="(item, index) in itemList" :key="index">
                  <div class="title">
                    <i class="el-icon-picture-outline-round"></i> {{ item.name }}
                  </div>
                  <div class="children"> 
                      <div class="child" v-for="(child, inx) in item.children" :key="inx" @click="routerTo(item.id, child.id)">
                          <el-button size="mini" round > {{ child.name }} </el-button> 
                      </div>
                  </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      showItem: false,
      itemList: [],
      webInfo: {}, 
      xueliid: "",
      schoolid: "",
    };
  },
   computed: {
    token() {
      return localStorage.token || this.$store.state.UserInfo.token;
    },
    username() {
      return this.$store.state.UserInfo.username;
    },
    secondTitle() {
      return this.$store.state.secondTitle
    },
    path() {
      return this.$route.path
    }
  },
  watch: {
    path() {
      this.getXueli()
    }
  },
  created () {
    this.getWebInfo();
    
  },
  mounted () {
    this.getXueli()
    this.getUser();
    // this.getItemList();
  },
  methods: {
    handleSelect(e) {
      console.log(e);
    },

    // 根据 id 获取学历
    getXueli() {
      let data = this.$route.params
      if (data.schoolid && data.xueliid ) {
        this.$store.commit("getSchoolData", data)
        this.schoolid = data.schoolid
        this.xueliid = data.xueliid
        this.getItemList()
      }
    },
    // getUserinfo
    async getUser() {
      if(this.token) {
        let res = await this.$axios.post("/port/user/username", { token: this.token })
        // console.log(res);
        this.$store.commit("getUserInfo", res.data.data)
      }
    },
     // 跳转二级页面
            routerTo( sid, cid ) {
                this.$router.push(`/class/${sid}/${cid}`)
            },
     // 获取学历分类
            async getItemList() {
              let arr = []
                let res = await this.$axios.post("/port/index/college", { key: this.$key })
                //  console.log(res);
                this.itemList = res.data.data
                this.itemList.forEach( el => {
                  if (el.id == this.schoolid) {
                    arr = el.children
                  }
                })
                arr.forEach( el => {
                  if (el.id == this.xueliid) {
                    // console.log(el.name);
                    
                    this.$store.commit("getSecondTitle", el.name)
                  }
                })
            },
    // 列表限时
    itemShow() {
      this.showItem = true
    },
    onMouseOut() {
      this.showItem = false
    },
    //  个人中心也
    showInfo() {
      this.$router.push("/userinfo")
    },
    logout() {
      this.$store.commit("getUserInfo", {})
      localStorage.removeItem("token")
    },
        // 网页信息
     async getWebInfo() {
        let res = await this.$axios.post("/port/index/website", { key: this.$key })
        // console.log(res);
        if (res.data.code == 200) {
            this.webInfo = res.data.data[0]
        }
        let keywords = document.querySelector("meta[name=keywords]")
        let desc = document.querySelector("meta[name=description]")
        let title = document.querySelector("title")
        // console.log(keywords);
        keywords.content = this.webInfo.keyword
        desc.content = this.webInfo.describe
        title.innerText = this.webInfo.title
     },
  }
};
</script>

<style lang="scss" scoped>
#header_navbar {
  width: 100%;
  margin: 0 auto;
  border-bottom: 1px solid #f2f2f2;
  box-sizing: border-box;
  background-color: #fff;
  .container {
    width: 1200px;
    height: 100px;
    display: flex;
    align-items: center;
    // overflow: hidden;
    margin: 0 auto;
    position: relative;
    left: 0;
    top: 0;
    z-index: 100000;
    .itemlist {
      width: 800px;
      height: 600px;
      box-shadow: 0 0 12px #999;
      border: 1px solid #999;
      position: absolute;
      left: 200px;
      top: 80px;
      background-color: #fff;
      border-radius: 10px;
      z-index: 100000;
      zoom: 1;
      &::before {
            content: "";
            position: absolute;
            left: 95px;
            top: -56px;
            width: 10px;
            height: 10px;
            margin: 50px;
            transform: rotate(45deg);
            background: #fff;
            z-index: 0;
            border-top: 1px solid #999;
            border-left: 1px solid #999;
            // box-shadow: 0 0 12px #999;
            z-index: 10;
      }
      .nav_item {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
        .nav_group {
          width: 100%;
          box-sizing: border-box;
          .group {
            width: 100%;
            .title {
              font-weight: bold;
              font-size: 20px;
              height: 40px;
              line-height: 40px;
              color: red;
            }
            .children {
              width: 100%;
              padding: 10px;
              box-sizing: border-box;
              display: flex;
              flex-wrap: wrap;
              .el-button {
                margin: 10px;
              }
            }
          }
        }
      }
    }
    .btnbox {
      width: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      &:hover {
        .icon {
          transform: rotate(-180deg);
          transition: all 0.2s linear;
        }
      }
      .icon {
        margin-left: 20px;
        color: #e84e40;
      }
      .itemname {
        font-size: 24px;
        color: #e84e40;
      }
    }
    .logo {
      width: 200px;
      height: 100px;
      overflow: hidden;
      img {
        width: 170px;
        height: 80px;
        display: block;
      }
    }
    .login {
      text-align: center;
      width: 150px;
    }
    .navbar {
      flex: 1;
    }
  }
}
.el-menu.el-menu--horizontal {
  border-bottom: none !important;
}
</style> 